<template>
  <div class="box5">
    <p class="title">未来7天游客访问量趋势图</p>
    <p class="bg"></p>
    <div class="echart" ref="echart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
//获取DOM元素
let echart = ref()
// 初始化数据，data1和data2分别表示两条曲线的数据
const data1 = ref<Array<[number, number]>>([])
const data2 = ref<Array<[number, number]>>([])
let myEcharts = ref()
let maxDataTime = ref(15) // 设置数据老化时间
onMounted(() => {
  createInitialData() // 创建初始数据
  //初始化Echarts实例
  myEcharts.value = echarts.init(echart.value)
  // 配置折线图的选项
  const option = {
    xAxis: {
      type: 'time', // x轴类型设置为时间轴
      boundaryGap: false, // 时间轴不留白
      min: 'dataMin', // x轴最小值根据数据动态调整
      max: 'dataMax', // x轴最大值根据数据动态调整
    },
    yAxis: {
      type: 'value', // y轴类型设置为数值轴
    },
    series: [
      {
        name: '曲线1',
        type: 'line', // 折线图
        data: data1.value,
        symbolSize: 10, // 设置折线上的点的大小
      },
      {
        name: '曲线2',
        type: 'line', // 折线图
        data: data2.value,
        symbolSize: 10, // 设置折线上的点的大小
      },
    ],
  }

  myEcharts.value.setOption(option)

  initEcahrt()
})
// 创建初始数据
const createInitialData = () => {
  let now: any = new Date()
  for (var i = 0; i < 1; i++) {
    let time: any = new Date(now - i * 1000)
    data1.value.push([time.getTime(), Number((Math.random() * 100).toFixed(0))]) // 新数据在数组前面插入
    data2.value.push([
      time.getTime() + 300,
      Number((Math.random() * 100).toFixed(0)),
    ])
  }
}
const initEcahrt = () => {
  // 更新数据的定时器，每秒增加一个新数据，删除一个最老的数据
  setInterval(() => {
    let now = new Date()
    let time = new Date(now)
    data1.value.push([time.getTime(), Number((Math.random() * 100).toFixed(0))]) // 新数据在数组前面插入
    var random_time = Math.random() * 100
    data1.value.push([time.getTime(), Math.random() * 100])
    data1.value.push([time.getTime() + random_time * 3, Math.random() * 100])
    data1.value.push([time.getTime() + random_time * 6, Math.random() * 100])
    data2.value.push([time.getTime(), Number((Math.random() * 100).toFixed(0))])
    data2.value.push([time.getTime() + random_time * 2, Math.random() * 100])
    data2.value.push([time.getTime() + random_time * 4, Math.random() * 100])
    data2.value.push([time.getTime() + random_time * 6, Math.random() * 100])
    data2.value.push([time.getTime() + random_time * 8, Math.random() * 100])

    while (data1.value.length > 0) {
      if (time.getTime() - data1.value[0][0] > maxDataTime.value * 1000) {
        data1.value.shift() // 删除最老的数据
      } else {
        break // 跳出循环
      }
    }
    while (data2.value.length > 0) {
      if (time.getTime() - data2.value[0][0] > maxDataTime.value * 1000) {
        data2.value.shift() // 删除最老的数据
      } else {
        break // 跳出循环
      }
    }

    // 计算最小值
    var maxXValue = Math.max(
      ...data1.value.concat(data2.value).map((item) => item[0]),
    ) // 获取数据1和数据2的x轴的最大值
    var minValue = maxXValue - maxDataTime.value * 1000 // 计算最小值，减去一个固定值

    // 更新图表，设置切换动画效果
    myEcharts.value.setOption({
      xAxis: {
        min: minValue, // 设置x轴的最小值
      },
      series: [
        {
          data: data1.value,
          animation: false, // 禁用动画
        },
        {
          data: data2.value,
          animation: false, // 禁用动画
        },
      ],
    })
  }, 1000) // 定时器每秒执行一次
}
</script>

<style lang="scss" scoped>
.box5 {
  width: 100%;
  height: 100%;
  background: url('../../images/dataScreen-main-cb.png') no-repeat;
  background-size: 100% 100%;
  //   margin: 0px 5px;
  .title {
    margin-left: 10px;
    color: #fff;
    font-size: 20px;
  }
  .bg {
    width: 68px;
    height: 7px;
    background: url('../../images/dataScreen-title.png') no-repeat;
    background-size: cover;
    margin: 10px 0 0 0;
  }
  .echart {
    width: 100%;
    // height: calc(100% - 660px);
    height: 250px;
    // background-color: red;
  }
}
</style>
